import { Navigate, useRoutes} from "react-router-dom";
import lazyLoad from "@/hooks/lazyLoad";
import React from "react";

// 需要导入modules文件夹下的所有模块路由参数
// eager: true 立即加载文件
// ./modules/*.tsx  modules下所有的后缀名.tsx的文件都进行导入
const metaRoutes = import.meta.glob("./modules/*.tsx",{eager: true});
// console.log(metaRoutes,'metaRoutes')

// 定义一个数组存储模块路由的参数信息
const routerArray = []  
Object.keys(metaRoutes).forEach(item=>{
  // 注意:还需要考虑children路由的配置信息 再一次遍历
  Object.keys(metaRoutes[item]).forEach(key=>{
    routerArray.push(...metaRoutes[item][key])
  })
})

// 基础路由
export const rootRouter = [
  {
    path: '/',
    element: <Navigate to="/login" />  // 重定向 
  },
  {
    path: '/login',
    element: lazyLoad(React.lazy(() => import('@/views/login/login'))),
    meta: {
      requireAuth: false,
      title: '首页',
      key: 'login'
    }
  },
  {
    path: '/home',
    element:lazyLoad(React.lazy(() => import("@/views/home/home")))  
  },
  {
    path: '*',  // 404页面
    element:lazyLoad(React.lazy(() => import("@/components/404/Error")))  
  },
  // 将处理后的模块路由配置信息进行展开
  ...routerArray
];


// console.log(rootRouter,'rootRouter')

// useRoutes 这个方法中react中的hook函数,只能放在react组件或者react hook函数中使用
const Router = () => {
  return useRoutes(rootRouter);
};

export default Router;